/*
 * General styling
*/

html {
    background: no-repeat center / cover var(--wall-img1-url) var(--main-surface-primary);
    height: 100%;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    width: 100%;
}

body {
    color: var(--main-neutral-primary);
    font: var(--text-body-md);
    height: 100%;
    margin: 0;
    overflow: hidden;
    overflow-y: auto;
    padding: 0;
    transition: var(--transition-bg-color);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
}

body * {
    box-sizing: border-box;
}

#chromeclipboard,
#i-ping {
    left: -100%;
    opacity: 0;
    position:absolute;
    top: -100%;
}


/* Fonts */

.bold {
    font-weight: 800;
}


/* Display */

.hidden {
    display: none !important;
}

.vo-hidden {
    opacity: 0 !important;
}

.v-hidden, .vo-hidden {
    visibility: hidden !important;
}


/* RTL */

.rtl {
    direction: rtl;
}


/* Scrollbars */

.scrollable {
    overflow: hidden;
    overflow-y: auto;
}

* {
    scrollbar-color: var(--scroll-bar-handle) var(--scroll-bar-background);
    scrollbar-width: thin;
}


@supports selector(::-webkit-scrollbar) {
    * {
        scrollbar-color: auto;
        scrollbar-width: auto;
    }

    ::-webkit-scrollbar {
        max-width: 8px;
        max-height: 8px;
    }

    ::-webkit-scrollbar-track {
        box-shadow: none; 
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: var(--scroll-bar-handle); 
        box-shadow: none; 
    }

    ::-webkit-scrollbar-thumb:window-inactive {
        background-color: var(--scroll-bar-handle-inactive); 
    }
}